import React, { Component } from 'react'
import './04-组件的样式.css'
export default class App extends Component {
    myref = React.createRef()
    state = {
        list: [
            {
                id: 1,
                mytext: "今天又要学react"
            },
            {
                id: 2,
                mytext: "周六放假"
            },
            {
                id: 3,
                mytext: "周日放假"
            },
        ]
    }
    // 添加数据
    add = () => {
        this.setState({
            list: [...this.state.list,
            {
                // id: this.state.list.length + 1,
                id:Math.random()*100000,
                mytext: this.myref.current.value
            }]
        })
        // 清空输入框数据
        this.myref.current.value = ''
    }
    // 删除
    delItem=(id)=>{
        // 第一种删除方法
        // this.setState({
        //     list:this.state.list.filter((item,index)=>index!==id)
        // })
        // 第二种删除方法
        let newlist=this.state.list.concat()
        newlist.splice(id,1)
         this.setState({
            list:newlist
        })
    }
    render() {
        return (
            <div>
                <h3>TODO案例</h3>
                <input type="text" ref={this.myref} />
                <button onClick={() => this.add()}>add</button>
                <ul>
                    {
                        this.state.list.map((item,index) => (
                        <li key={item.id}>
                            {/* 普通文本 */}
                            {/* {item.mytext}  */}

                            {/* 富文本展示：dangerouslySetInnerHTML，__html */}
                            <span dangerouslySetInnerHTML={
                               {
                                __html:item.mytext
                               }
                            }></span>
                        <button onClick={()=>this.delItem(index)}> 删除</button>
                        </li>))
                    }
                    {/* 条件渲染---》数据为空时渲染--1、三目运算符，2、&&运算符 3、使用className类名样式来操作显示隐藏*/}
                    {/* {this.state.list.length===0?<li>暂无代办事项</li>:null} */}
                    {/* {this.state.list.length===0 && <li>暂无代办事项</li>} */}
                    <li className={this.state.list.length===0?'':'hidden'}>暂无代办事项</li>
                </ul>
                
            </div>
        )
    }
}
